<template>
  <div class="page">
    <div class="page-head" @click="addArticle">
      <svg-icon icon-class="add" />
      <span>新建文章</span>
    </div>
    <div class="page-all">
      <div v-for="(item, index) in list" ref="deleteLi" :key="item.articleId" :class="[active === index ? 'active' : '']" class="page-list" @click="selectArticle(index, item.articleId, item.articleTitle, item.articleContent)">
        <svg-icon v-show="item.status === '0'" icon-class="paper" class="paper-icon" />
        <svg-icon v-show="item.status === '1'" icon-class="asend" class="paper-icon" />
        <div class="paper-list-name">
          <div class="paper-list-title">{{ item.articleTitle }}</div>
          <div class="paper-list-content">{{ item.world }}</div>
        </div>
        <div :class="[active === index ? '': 'displayNone']" class="paper-icon-setting" @click.stop="setting(index, item.articleId)" >
          <svg-icon icon-class="setting" />
        </div>
        <div :class="[active1 === index ? '': 'displayNone']" class="page-list-setting" >
          <ul>
            <li class="page-list-setting-li el-icon-caret-left" @mouseenter="showKind" @mouseleave="hiedKind">
              <svg-icon icon-class="move" />
              移动文章
              <div v-show="kindList" class="page-kind">
                <ol>
                  <li v-for="group in classifyKind" :key="group.classifyId" @click="moveArticle(item.articleId, group.classifyId)">{{ group.classifyName }}</li>
                </ol>
              </div>
            </li>
            <li @click="deleteWorld(item.articleId, $event)">
              <svg-icon icon-class="delete" />
              删除文章
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addArticle, getList, deleteArticle, searchClassify, moveArticled } from '@/api/writeArticle'
import { mapGetters } from 'vuex'
export default {
  props: {
    classifyIds: {
      type: String,
      default: '',
      classifyRealId: null
    },
    // 时间
    date: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      list: null,
      active: null,
      active1: null,
      classifyRealId: null,
      classifyKind: null,
      kindList: false
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  watch: {
    // 获取文章列表
    classifyIds(newVal) {
      this.classifyRealId = newVal
      var data = {
        userId: this.userId,
        classifyId: newVal
      }
      getList(data).then(response => {
        this.list = response.data.result
      })
    },
    date(newVal) {
      var data = {
        userId: this.userId,
        classifyId: this.classifyRealId
      }
      getList(data).then(response => {
        this.list = response.data.result.reverse()
      })
    }
  },
  created() {
    document.addEventListener('click', (e) => {
      // console.log(this.$refs.deleteLi[0].contains(e.target))
      if (this.$refs.deleteLi[0]) {
        if (!this.$refs.deleteLi[0].contains(e.target)) {
          this.active1 = null
        }
      }
    })
  },
  methods: {
    // 请求列表
    getArticleList() {
      var data = {
        userId: this.userId,
        classifyId: this.classifyIds
      }
      getList(data).then(response => {
        this.list = response.data.result.reverse()
      })
    },
    // 新建文章
    addArticle() {
      // 传值分类id给父
      this.$emit('article', this.classifyIds)
      var classifyIds = this.classifyIds
      var data = {
        classifyIds: classifyIds,
        userId: this.userId
      }
      addArticle(data).then(response => {
        var result = response.data.result[0]
        this.getArticleList()
        this.active = 0 // 新建文章默认选择第一个编辑
        this.selectArticle(0, result.articleId, result.articleTitle, result.articleContent)
      })
    },
    // 选择文章
    selectArticle(index, id, title, content) {
      this.active1 = null
      // console.log(id)
      this.active = index
      var info = {
        classifyRealId: this.classifyRealId, // 分类id
        articleId: id,
        articleTitle: title,
        articleContent: content
      }
      this.$emit('articleSignal', info)
      this.$emit('article', this.classifyRealId)
      // console.log(info)
    },
    // 设置
    setting(index, id) {
      if (index === this.active1) {
        this.active1 = null
      } else {
        this.active1 = index
      }
      var data = {
        userId: this.userId
      }
      var that = this
      searchClassify(data).then(response => {
        console.log(that.classifyIds)
        var indexNum
        response.data.result.forEach(function(item, index) {
          if (item.classifyId === that.classifyIds) {
            indexNum = index
          }
        })
        console.log(indexNum)
        // console.log(response.data.result)
        response.data.result.splice(indexNum, 1)
        this.classifyKind = response.data.result
        console.log(response.data.result)
      })
    },
    // 删除文章
    deleteWorld(articleId, event) {
      this.$confirm('确认要删除此文章吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        const data = {
          userId: this.userId,
          classifyId: this.classifyRealId,
          articleId: articleId
        }
        console.log(data)
        deleteArticle(data).then(response => {
        // console.log(response)
          this.getArticleList()
        })
      })
    },
    // 展示分类
    showKind() {
      this.kindList = true
    },
    // 隐藏分类
    hiedKind() {
      this.kindList = false
    },
    // 移动文章
    moveArticle(articleId, classifyId) {
      // console.log(articleId, classifyId, this.classifyIds)
      var data = {
        userId: this.userId,
        articleId: articleId,
        newClassifyId: classifyId,
        classifyId: this.classifyIds
      }
      moveArticled(data).then(response => {
        console.log(response)
        this.getArticleList()
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.page
  height: 100%
  border-bottom: 1px solid #d9d9d9
  .page-head
    width: 100%
    padding-left: 10%
    padding-top: 7%
    overflow-y: scroll
    // padding: 20px 0 30px 30px
    height: 11%
    font-size: 18px
    opacity: 1
    cursor: pointer
    user-select: none
    &:hover
      opacity: 1
  .page-all
    height: 89%
    overflow-y: scroll
    .page-list
      display: flex
      align-items: center
      height: 69px
      background: #fff
      opacity: 1
      position: relative
      border-top: 1px solid #d9d9d9
      cursor: pointer
      user-select: none
      border-left: 5px solid #fff
      &:hover
        background: #e6e6e6
        border-left: 5px solid #ec7259
      .paper-icon
        margin-left: 20px
        font-size: 1.25rem
        opacity: 0.5
        margin-right: 25px
      .paper-list-name
        position: relative
        width: 65%
        .paper-list-title
        .paper-list-name
          overflow: hidden
          text-overflow: ellipsis
          white-space: nowrap
        .paper-list-title
          font-size: 16px
          font-weight: bold
        .paper-list-content
          padding-top: 10px
          font-size: 13px
          opacity: 0.7
          color: #333
          overflow: hidden
          text-overflow: ellipsis
          white-space: nowrap
</style>
<style lang="stylus" scoped>
  .active
    background: #e6e6e6 !important
    // border-left: 5px solid #ec7259
    border-left: 5px solid #ec7259 !important
  .displayNone
    display: none
  .paper-icon-setting
    position: absolute
    right: 20px
  .page-list-setting
    position: absolute
    right: 10px
    z-index: 100
    bottom: -70px
    background: #fff
    color: #666
    text-align: center
    border: 1px solid #f5f5f5
    border-radius: 10px
    & ul
      padding: 0
      margin: 0
      &::before
        border-left: 9px solid #e6e6e6;
        border-right: 9px solid #e6e6e6;
        border-bottom: 9px solid #fff;
        content: '';
        position: absolute;
        top: -9px;
        right: 10px;
        display: inline-block;
    & > ul > li
      list-style-type: none
      padding: 10px 25px
      font-size: 15px
      border-bottom: 1px solid #f5f5f5
      user-select: none
      &:hover
        background: #666
        border-radius: 10px
        color: #fff
    .page-list-setting-li
      position: relative
      overflow: visible !important
      .page-kind
        position: absolute
        left: -110px
        border-radius: 10px
        top: 0
        color: #666
        background: #fff
        box-shadow: -4px 3px 5px #eee
        text-align: center
        & ol
          padding-left: 0
        & ol li
         padding: 10px 25px
         list-style-type: none
         border-radius: 10px
         border-bottom: 1px solid #f5f5f5
         z-index: 9999
         &:hover
          color: #fff !important
          background: #666
</style>
